<template>
  <div class="exambg">
    <div class="examtable">
      <el-table class="teblestyle" height="200px" :data="tabledata" :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}" stripe highlight-current-row style="width: 100%">
        <el-table-column prop="testUuid" label="试卷id">
        </el-table-column>
        <el-table-column prop="testName" label="名称">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间">
        </el-table-column>
        <el-table-column prop="testFounder" label="出卷人">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope='scope'>
            <div>
              <el-button class="editbutton" type="success" v-if="scope.row.status==-1"
                @click='ReleaseExam(scope.row.testUuid)'>发布
              </el-button>
              <el-button class="editbutton" type="info" disabled v-if="scope.row.status==0">过期</el-button>
              <router-link :to="{path:'examedit', query:scope.row}">
                <el-button class="editbutton" type="primary">
                  编辑
                </el-button>
              </router-link>
              <el-button class="editbutton" type="danger" @click="DeleteExam(scope.row.testUuid)">删除</el-button>
            </div>
          </template>
        </el-table-column>

      </el-table>
      <div class="btnstyle">
        <Bomb class="addbutton" @getnewexam='refresh'></Bomb>
      </div>
    </div>
  </div>
</template>

<script>
  import Bomb from '@/components/common/Bomb.vue'
  export default {
    name: 'Exam',
    components: {
      Bomb
    },
    data() {
      return {
        tabledata: [] //试卷信息表
      }
    },
    mounted() {
      this.getexaminfo();
    },
    computed: {
      listData() {
        return this.$store.state.newpage
      }
    },
    watch: {
      listData(newVal, oldVal) {
        // 数据变化后，调用b组件内的函数
        this.getexaminfo()
      }
    },
    methods: {
      refresh() { //页面刷新
        this.getexaminfo()
      },
      editexam(item) {
        // this.$router.push({path:'examedit',params:item})
        console.log(item);
      },
      addexam(list) {
        this.tabledata = []
        for (let i = 0; i < list.length; i++) {
          this.tabledata.push(list[i]);
          // console.log(list[i])
        }
        // console.log(this.tabledata)
      },
      getexaminfo() {
        this.$getRequest({
            url: '/testPaper/allTest',
          }).then(res => {
            // console.log(res);
            if (res.code === 200) {
              this.addexam(res.data);
            } else {
              this.$alert(res.msg, '提示', {
                confirmButtonText: '确定'
              })
            }
          })
          .catch(failResponse => {});
      },
      Message_Box(operatename, testUuid) {
        let text = operatename == 0 ? '删除' : '发布';
        let operate = '对该试卷进行' + text + ',是否继续?';
        this.$confirm(operate, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            'testUUId': testUuid,
          }
          try {
            if (operatename === 0) { //做删除操作
              this.$postRequest({
                url: '/testPaper/delTestPaper',
                params: data
              }).then(res => {
                if (res.code==200) {
                  this.tabledata = this.tabledata.filter((item) => item.testUuid !== testUuid)
                  // console.log(res)
                }
              })

            }
            if (operatename === 1) { //做发布操作
              this.$postRequest({
                url: '/testPaper/updateTestPaperStatus',
                params: data
              }).then(res => {
                if (res.code==200) {
                  // console.log(res)
                  this.$store.commit('changenewpage',1)
                }
              })
            }
            this.$message({
              type: 'success',
              message: text + '成功！'
            })
          } catch (err) {
            this.$message({
              type: 'error',
              message: text + '失败！'
            })
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消' + text
          })
        })
      },
      DeleteExam(txt) {
        this.Message_Box(0, txt) //删除
      },
      ReleaseExam(txt) {
        this.Message_Box(1, txt) //发布
      }
    }
  }
</script>

<style>
  .addbutton {
    position: absolute;
    background-color: #ffffff;
    margin-right: 8rem;
  }

  .examtable {
    max-height: 90vh;
    background-color: #ffffff;
  }

  .editbutton {
    width: 3.125rem;
    height: 25px;
    font-size: 10px;
    padding: 0px;
  }

  .btnstyle {
    width: 100%;
    height: 4vh;
    display: flex;
    flex-direction: row-reverse;
    /* background-color: #3a3a3a; */
    border-top: 0.0625rem solid #f1f1f1;
  }

  .teblestyle {
    min-height: 84vh;
    max-height: 86vh;
    overflow: auto;
  }
</style>
